<template>
  <div class="alldialog">
    <div
      :class="{ center_posi: gjyjPhoneDia == 'gjyj' }"
      class="dialogPanel notooldialog"
    >
      <div class="tabr-nav-title">
        <van-nav-bar
          title="单兵连线"
          style="width: 100%; height: 44px"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
      <div class="dialogbody">
        <div class="wlgz-echarts">
          <div class="echarts-title">
            <div class="echarts-title-icon"></div>
            <div class="echarts-title-text">远程指挥</div>
          </div>
          <div class="echarts-body">
            <video class="video" id="local_video_element_id"></video>
          </div>
        </div>
        <div class="wlgz-echarts">
          <div class="echarts-title">
            <div class="echarts-title-icon"></div>
            <div class="echarts-title-text">现场</div>
          </div>
          <div class="echarts-body">
            <video class="video" id="remote_video_element_id"></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  computed,
  watch,
  defineExpose,
  nextTick,
  onBeforeUnmount,
} from "vue";
import * as RongIMLib from "@rongcloud/imlib-next";
import { installer as rtcInstaller } from "@rongcloud/plugin-rtc";
import { installer as callPlusInstaller } from "@rongcloud/plugin-call-plus";
const isHide = ref(true);
const callId = ref();
const emit = defineEmits(["showVideo"]);
const props = defineProps(["gjyjPhoneDia"]);
// im 初始化
RongIMLib.init({
  appkey: "mgb7ka1nm2h1g",
});
// RTC 初始化
const rtcClient = RongIMLib.installPlugin(rtcInstaller, {});
// CallPlus 初始化
const callPlusClient = RongIMLib.installPlugin(callPlusInstaller, {
  rtcClient,
});

//返回
const onClickLeft = () => history.back();

// 初始化
const initIMLid = () => {
  // 连接融云服务器
  RongIMLib.connect(
    "Qhs8SG3KfoK2QDzcfiuwWM8f4XwUpJha9f4KX6P3Keo=@8028.cn.rongnav.com;8028.cn.rongcfg.com"
  ).then(({ code, data }) => {
    if (code === RongIMLib.ErrorCode.SUCCESS) {
      console.log("connect success", data?.userId);
      addEventIsHandler();
      return;
    }
    console.log(`connect error: ${code}`);
  });
};

// 添加事件处理程序
const addEventIsHandler = async () => {
  // 注册 callPlus 业务层监听事件
  callPlusClient.setCallPlusEventListener({
    /**
     * 呼入通知
     * 收到呼入时，可选择接听或挂断通话
     * @param session 通话实例
     * @param extra  透传呼叫方发起呼叫时携带的附加信息
     */
    async onReceivedCall(session, extra) {
      const resCallId = session.getCallId();
      console.log(`呼入通知, callId: ${resCallId}`);
      /**
       * 接听电话
       */
      const { code } = await callPlusClient.accept(resCallId);
      console.log(`接听通话结果, code: ${code}`);
    },
    /**
     * 收到某个人的音频或视频可播放
     * 业务层可调 playMedia(userId, mediaType) 播放
     * 请务必根据用户 ID 和媒体类型对流进行判断，如果是本地采集的音频流，请不要在本端播放，避免造成回声或啸叫问题。
     *
     * @param userId 用户 id
     * @param mediaType 媒体类型
     */
    onUserMediaAvailable(userId, mediaType) {
      /**
       * 播放
       */
      callPlusClient.playMedia(userId, mediaType);
      isHide.value = false;
    },
    /**
     * 人员状态变更
     * @param callId 通话 id
     * @param userId 状态变更人员 id
     * @param state 人员变更后状态
     * @param reason 变更原因
     */
    onRemoteUserStateChanged(
      // 增量
      callId,
      userId,
      state,
      reason
    ) {
      console.log(
        `人员状态变更, callId: ${callId}, ${userId}状态: ${state}, reason: ${reason}`
      );
    },
    /**
     * 通话结束（群组通话时，客户端挂断不代表通话结束）
     * @param session 通话实例
     * @param reason 通话结束原因
     */
    onCallEnded(session, reason) {
      console.log(
        `通话结束, callId: ${session.getCallId()}, reason: ${reason}`
      );
    },
  });
  callPlusClient.setVideoView([
    {
      userId: "cq_002",
      videoElement: document.getElementById("local_video_element_id"),
    },
    {
      userId: "cq_001",
      videoElement: document.getElementById("remote_video_element_id"),
    },
  ]);
  const { code, callId: resCallId } = await callPlusClient.startCall([
    "cq_001",
  ]);
  console.log("code", code);
  if (resCallId) {
    callId.value = resCallId;
  }
};

onMounted(() => {
  initIMLid();
  console.log(props.gjyjPhoneDia);
});

const showVideoDialogPanel = function (type) {};

const CloseFxdPanel = function () {
  emit("showVideo", false);
};

onBeforeUnmount(() => {
  if (callId.value) {
    callPlusClient.hangup(callId.value);
    callId.value = null;
    console.log("关闭了");
  }
});

defineExpose({
  showVideoDialogPanel,
});
</script>

<style lang="less" scoped>
.alldialog {
  .dialogPanel {
    .dialogName {
      .closeIcon {
      }
    }
    .dialogbody {
      .wlgz-echarts {
        .echarts-title {
          .echarts-title-icon {
          }
          .echarts-title-text {
            text-align: center;
            margin-top: 10px;
          }
        }
        .echarts-body {
          width: 375px;
          background: #000;
          margin-top: 10px;
          .video {
            height: 100%;
            width: 100%;
          }
          #local_video_element_id {
          }
        }
      }
      .wlgz-echarts {
        .echarts-title {
          .echarts-title-icon {
          }
          .echarts-title-text {
          }
        }
        .echarts-body {
          width: 375px;
          background: #000;

          .video {
            height: 100%;
            width: 100%;
          }
          #remote_video_element_id {
          }
        }
      }
    }
  }
  .notooldialog {
  }
  .gjyj {
  }
}
</style>
